<template>
	<view class="container">
		<!-- 顶部欢迎区 -->
		<view class="welcome-section">
			<view class="greeting-container">
				<text class="greeting-text">{{ greeting }}</text>
				<text class="date-text">{{ currentDate }}</text>
			</view>
			<view class="avatar-container">
				<image src="/static/logo.png" mode="aspectFill" class="avatar-image"></image>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<uni-icons type="search" size="20" color="#95a5a6" class="search-icon"></uni-icons>
			<input type="text" placeholder="搜索你想要的课程" class="search-input" />
		</view>

		<!-- 课表和学习计划导航卡片 -->
		<view class="nav-cards">
			<view class="nav-card schedule" @click="navigateTo('schedule')">
				<view class="card-content">
					<view class="card-icon">
						<uni-icons type="calendar" size="32" color="#fff"></uni-icons>
					</view>
					<text class="card-title">课表</text>
					<text class="card-desc">查看详细的课程安排</text>
				</view>
				<view class="card-bg-icon">
					<uni-icons type="calendar" size="120" color="rgba(255,255,255,0.1)"></uni-icons>
				</view>
			</view>
			<view class="nav-card timetable" @click="navigateTo('timetable')">
				<view class="card-content">
					<view class="card-icon">
						<uni-icons type="flag" size="32" color="#fff"></uni-icons>
					</view>
					<text class="card-title">学习计划</text>
					<text class="card-desc">制定个性化学习目标</text>
				</view>
				<view class="card-bg-icon">
					<uni-icons type="flag" size="120" color="rgba(255,255,255,0.1)"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 功能按钮区 -->
		<view class="function-area">
			<view class="function-grid">
				<view class="function-item" @click="handleFunction('study')" hover-class="function-item-hover">
					<view class="icon-wrapper bg-primary">
						<uni-icons type="flag" size="24" color="#fff"></uni-icons>
					</view>
					<text class="function-text">教习</text>
				</view>
				<view class="function-item" @click="handleFunction('homework')" hover-class="function-item-hover">
					<view class="icon-wrapper bg-secondary">
						<uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
					</view>
					<text class="function-text">作业</text>
				</view>
				<view class="function-item" @click="handleFunction('note')" hover-class="function-item-hover">
					<view class="icon-wrapper bg-success">
						<uni-icons type="compose" size="24" color="#fff"></uni-icons>
					</view>
					<text class="function-text">笔记</text>
				</view>
				<view class="function-item" @click="handleFunction('experiment')" hover-class="function-item-hover">
					<view class="icon-wrapper bg-danger">
						<uni-icons type="shop" size="24" color="#fff"></uni-icons>
					</view>
					<text class="function-text">实验室</text>
				</view>
				<view class="function-item" @click="handleFunction('resource')" hover-class="function-item-hover">
					<view class="icon-wrapper bg-warning">
						<uni-icons type="download" size="24" color="#fff"></uni-icons>
					</view>
					<text class="function-text">资源</text>
				</view>
				<view class="function-item" @click="handleFunction('more')" hover-class="function-item-hover">
					<view class="icon-wrapper bg-info">
						<uni-icons type="more" size="24" color="#fff"></uni-icons>
					</view>
					<text class="function-text">更多</text>
				</view>
			</view>
		</view>

		<!-- 今日课程提醒 -->
		<view class="today-reminder">
			<view class="section-header">
				<text class="section-title">今日课程</text>
				<text class="view-all" @click="viewAllCourses">查看全部</text>
			</view>
			<view class="course-card" @click="viewCourseDetail(courses[0])">
				<view class="course-time">
					<text class="time">09:00</text>
					<text class="duration text-muted">90分钟</text>
				</view>
				<view class="course-info">
					<text class="course-name">高等数学</text>
					<text class="course-location text-muted">
						<uni-icons type="location" size="14"></uni-icons>
						教学楼A301
					</text>
				</view>
				<view class="course-status">
					<text class="status-tag bg-info">即将开始</text>
				</view>
			</view>
		</view>

		<!-- 课程列表 -->
		<view class="course-list">
			<view class="section-header">
				<text class="section-title">近期课程</text>
				<text class="view-all" @click="viewAllCourses">本周</text>
			</view>
			<view class="course-item" v-for="(item, index) in courses" :key="index" @click="viewCourseDetail(item)">
				<view class="course-content">
					<text class="course-time">{{ item.time }}</text>
					<text class="course-name">{{ item.name }}</text>
				</view>
				<view class="course-status">
					<text class="status-tag" :class="getStatusClass(item.status)">{{ item.statusText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				greeting: '早上好',
				currentDate: '',
				courses: [{
						time: '09:00',
						name: '高等数学',
						status: 'upcoming',
						statusText: '即将开始'
					},
					{
						time: '11:00',
						name: '大学物理',
						status: 'ongoing',
						statusText: '进行中'
					},
					{
						time: '14:30',
						name: '英语听力',
						status: 'upcoming',
						statusText: '即将开始'
					}
				]
			}
		},
		onLoad() {
			this.updateGreeting();
			this.updateDate();
		},
		methods: {
			updateGreeting() {
				const hour = new Date().getHours();
				if (hour < 6) {
					this.greeting = '凌晨好';
				} else if (hour < 9) {
					this.greeting = '早上好';
				} else if (hour < 12) {
					this.greeting = '上午好';
				} else if (hour < 14) {
					this.greeting = '中午好';
				} else if (hour < 17) {
					this.greeting = '下午好';
				} else if (hour < 19) {
					this.greeting = '傍晚好';
				} else {
					this.greeting = '晚上好';
				}
			},
			updateDate() {
				const date = new Date();
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				this.currentDate = `${weekdays[date.getDay()]} ${date.getMonth() + 1}月${date.getDate()}日`;
			},
			navigateTo(type) {
				const routes = {
					'schedule': '/pages/schedule/index',
					'timetable': '/pages/timetable/index'
				};
				if (routes[type]) {
					uni.navigateTo({
						url: routes[type]
					});
				}
			},
			handleFunction(type) {
				switch (type) {
					case 'study':
						uni.navigateTo({
							url: '/pages/study/index'
						});
						break;
					case 'homework':
						uni.navigateTo({
							url: '/pages/homework/index'
						});
						break;
					case 'note':
						uni.navigateTo({
							url: '/pages/note/index'
						});
						break;
					case 'experiment':
						uni.navigateTo({
							url: '/pages/experiment/index'
						});
						break;
					case 'resource':
						uni.navigateTo({
							url: '/pages/resource/index'
						});
						break;
					case 'more':
						uni.navigateTo({
							url: '/pages/more/index'
						});
						break;
				}
			},
			getStatusClass(status) {
				switch (status) {
					case 'upcoming':
						return 'bg-info';
					case 'ongoing':
						return 'bg-success';
					default:
						return 'bg-warning';
				}
			},
			viewAllCourses() {
				uni.navigateTo({
					url: '/pages/schedule/index'
				});
			},
			viewCourseDetail(course) {
				uni.navigateTo({
					url: `/pages/study/course-detail?id=${course.id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/theme.scss';
	.container {
		flex: 1;
		padding: var(--spacing);
		background-color: #ebf5fb;
		min-height: 100vh;
	}

	/* 欢迎区域 */
	.welcome-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--spacing-lg);
		padding: var(--spacing-lg);
		background: linear-gradient(135deg, #3498db, #2980b9);
		border-radius: 16rpx;
		color: white;
		box-shadow: 0 8rpx 20rpx rgba(52, 152, 219, 0.15);

		.greeting-container {
			flex: 1;
		}

		.greeting-text {
			font-size: 48rpx;
			font-weight: 600;
			margin-bottom: var(--spacing-xs);
			color: #ffffff;
			letter-spacing: 1rpx;
		}

		.date-text {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			opacity: 0.95;
		}

		.avatar-container {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, 0.5);
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);

			.avatar-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
				background-color: #fff;
			}
		}
	}

	/* 搜索栏 */
	.search-bar {
		margin-bottom: var(--spacing-lg);
		padding: 24rpx 32rpx;
		background: white;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		transition: all 0.3s ease;

		&:focus-within {
			box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
		}

		.search-icon {
			margin-right: var(--spacing-sm);
			color: #95a5a6;
		}

		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #2c3e50;
			height: 80rpx;

			&::placeholder {
				color: #95a5a6;
			}
		}
	}

	/* 课表和学习计划导航卡片 */
	.nav-cards {
		display: flex;
		gap: 20rpx;
		margin-bottom: var(--spacing-lg);

		.nav-card {
			flex: 1;
			// height: 200rpx;
			position: relative;
			overflow: hidden;
			border-radius: 20rpx;
			padding: 30rpx;
			transition: all 0.3s ease;
			
			&.schedule {
				background: linear-gradient(135deg, #3498db, #2980b9);
			}
			
			&.timetable {
				background: linear-gradient(135deg, #2ecc71, #27ae60);
			}

			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.15);
			}

			.card-content {
				position: relative;
				z-index: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.card-icon {
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					margin-bottom: 16rpx;
					background: rgba(255, 255, 255, 0.2);
					backdrop-filter: blur(10px);
				}

				.card-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #ffffff;
					margin-bottom: 8rpx;
				}

				.card-desc {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.9);
				}
			}

			.card-bg-icon {
				position: absolute;
				bottom: -20rpx;
				right: -20rpx;
				opacity: 0.1;
				transform: rotate(-15deg);
			}
		}
	}

	/* 功能区域 */
	.function-area {
		margin-bottom: var(--spacing-lg);

		.function-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
			padding: 24rpx;
			background: white;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}

		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: var(--spacing);
			border-radius: 12rpx;
			background-color: #fff;
			box-shadow: var(--shadow-sm);
			transition: all 0.3s ease;

			.icon-wrapper {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				margin-bottom: var(--spacing-xs);
				background: #3498db;
				color: #fff;
			}

			.function-text {
				font-size: 26rpx;
				color: #34495e;
				font-weight: 400;
			}
		}

		.function-item-hover {
			transform: translateY(-2rpx);
			box-shadow: var(--shadow);
			background-color: #f8f9fa;
		}
	}

	/* 部分标题 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #2c3e50;
		}

		.view-all {
			font-size: 26rpx;
			color: #3498db;
			font-weight: 400;
		}
	}

	/* 今日课程 */
	.today-reminder {
		margin-bottom: var(--spacing-lg);

		.course-card {
			background: #fff;
			border-radius: 16rpx;
			padding: var(--spacing);
			margin-top: var(--spacing-sm);
			display: flex;
			align-items: center;
			box-shadow: var(--shadow-sm);
			border-left: 8rpx solid #3498db;
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-2rpx);
				box-shadow: var(--shadow);
			}

			.course-time {
				margin-right: 32rpx;
				text-align: center;

				.time {
					font-size: 36rpx;
					font-weight: 500;
					color: #3498db;
				}

				.duration {
					font-size: 24rpx;
					color: #7f8c8d;
				}
			}

			.course-info {
				flex: 1;

				.course-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #2c3e50;
				}

				.course-location {
					font-size: 24rpx;
					color: #7f8c8d;
				}
			}

			.course-status {
				.status-tag {
					padding: 6rpx 16rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					color: white;
					font-weight: 400;
					background: #3498db;
					box-shadow: 0 4rpx 8rpx rgba(52, 152, 219, 0.2);
				}
			}
		}
	}

	/* 课程列表 */
	.course-list {
		.course-item {
			background: white;
			border-radius: 16rpx;
			padding: 28rpx;
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
			}

			.course-content {
				flex: 1;

				.course-time {
					font-size: 28rpx;
					color: #7f8c8d;
					margin-bottom: 8rpx;
				}

				.course-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #2c3e50;
				}
			}

			.course-status {
				.status-tag {
					padding: 6rpx 16rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					color: white;
					font-weight: 400;

					&.bg-info {
						background: #3498db;
					}

					&.bg-success {
						background: #2ecc71;
					}

					&.bg-warning {
						background: #f1c40f;
					}
				}
			}
		}
	}

	/* 动画效果 */
	.animate-slide-in {
		animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
		opacity: 0;
		transform: translateY(20rpx);
	}

	@keyframes slideIn {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>